<template>
  <div class="petras">
    <div class="information">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <div class="existing">
          <div class="existingimg">
            <img
              src="https://www.jwsci.com/upload/1621501674901touxiang.PNG"
              alt=""
            />
          </div>
          <ul class="nickname">
            <li class="">
              登录账号
              <div class="user-right">15717211494</div>
            </li>

            <li>
              用户名
              <div class="user-right">黄赢飞</div>
            </li>
            <li>
              简介
              <div class="user-right">hyf</div>
            </li>
            <li>
              手机号码
              <div class="user-right">15717211494</div>
            </li>
            <li>
              邮箱
              <div class="user-right">1297568386@qq.com</div>
            </li>
            <li></li>
          </ul>
        </div>
      </el-card>
    </div>
    <div class="newuser">
      <el-card class="box-card1">
        <el-tabs :tab-position="tabPosition" style="height: 100%">
          <el-tab-pane label="基本信息">
            <div class="clearfix">
              <div class="interface">
                <el-form :label-position="labelPosition" label-width="80px">
                  <el-form-item label="用户名:">
                    <el-input v-model="renamed"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱:">
                    <el-input v-model="email"></el-input>
                  </el-form-item>
                  <el-form-item label="简介:">
                    <el-input v-model="mailto"></el-input>
                  </el-form-item>
                </el-form>
                <div style="text-align: center">
                  <el-button type="primary" size="small" @click="update"
                    >更新基本信息</el-button
                  >
                  <el-button type="danger" size="small">注销本次登录</el-button>
                </div>
              </div>
              <!-- <div class="thead">
                <img
                  src="https://www.jwsci.com/upload/1621501674901touxiang.PNG"
                  alt=""
                />
                <div>
                  <el-upload
                    class="upload-demo"
                    accept=".jpeg,.jpg,.gif,.png"
                    action="https://api.jwsci.com/files?funcode=personal"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList"
                    :headers="headerObj"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        只能上传 jpg/png 文件，且不超过 500kb
                      </div>
                    </template>
                  </el-upload>
                </div>
              </div> -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="安全设置">
            <div class="newbie">
              <el-upload
                class="upload-demo"
                action="https://api.jwsci.com/files"
                :headers="headerObj"
                accept=".docx"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :on-error="handleError"
              >
                <el-button
                  size="medium"
                  type="primary"
                  style="margin-left: 20px"
                  >点击上传</el-button
                >
              </el-upload>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerObj: {
        Authorization: "",
      }, //上传图片请求头
      labelPosition: "right",
      renamed: "", //用户名
      email: "",
      mailto: "",
      tabPosition: "top",
      fileList: [],
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj["Authorization"] = `Bearer ${str}`;
    console.log(this.headerObj.Authorization);
  },
  beforeMount() {
    this.Takeone();
  },
  methods: {
    Takeone() {},
    //更新本次消息
    update() {
      // console.log("用户名" + this.renamed);
      // console.log(this.email);
      // console.log(this.mailto);
      this.$axios.post(``, {});
    },
    beforeUpload(file) {
      console.log(file);
    },
    handleSuccess() {
      this.$message.success("文件上传成功");
    },
    // 文件上传失败
    handleError() {
      this.$message.error("文件上传失败");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style scoped lang="scss">
.petras {
  width: 100%;
  height: 100%;
  background-color: #fff;
  /* position: relative; */
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.information {
  width: 20%;
  height: 475px;
  margin-left: 20px;
  margin-top: 20px;
  // background-color: #42b983;
}

.newuser {
  width: 70%;
  height: 600px;
  margin-left: 20px;
  margin-top: 20px;
  // background-color: #50a7c2;
}
.existing {
}
.existingimg img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
.nickname {
  list-style-type: none;
  width: 100%;
  margin-top: 20px;

  li {
    line-height: 40px;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #f0f3f4;
  }
}
.user-right {
  float: right;
}
.clearfix {
  width: 100%;

  display: flex;
  flex-direction: row;
}
.interface {
  width: 30%;
}
.thead {
  width: 30%;
  margin-left: 150px;
  text-align: center;
  img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
}
</style>